import React, { useEffect, useState } from "react";
import { useRequest, useDebounce } from "ahooks";

const getList = () => {
  return fetch("http://121.89.205.189:3000/api/pro/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

const App = () => {
  // const [list, setList] = useState([]);

  // useEffect(() => {
  //   getList().then((res) => {
  //     setList(res.data);
  //   });
  // }, []);

  const { data, error, loading } = useRequest(getList);

  // console.log(data, loading);

  const [value, setValue] = useState();
  const debouncedValue = useDebounce(value, { wait: 500 });

  return (
    <div>
      <h2>ahooks的使用</h2>
      {/* <ul>
        {list.map((item) => (
          <li key={item.proid}>{item.proname}</li>
        ))}
      </ul> */}

      {loading ? (
        <div>loading...</div>
      ) : (
        <ul>
          {data.data.map((item) => (
            <li key={item.proid}>{item.proname}</li>
          ))}
        </ul>
      )}

      <div>
        <input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Typed value"
          style={{ width: 280 }}
        />
        <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>
      </div>
    </div>
  );
};

export default App;
